In the classic web server, the JavaScript rich text editor controls are generated to the HTML output page using HTML
templates that reside in the Domino server data directory.
Specifically, the template that ships with Domino:
domino-data-directory/domino/template/dojo-version/dom_richtext.htm
uses the Dojo rich text edit control. New templates can be added to connect to different rich text editors (the CKEditor for this article) by using a combination of template files, notes.ini settings and browser.cnf changes. (browser.cnf is in the domino data directory)
Here is an example
dom_richtext_ck.htm file that was built by copying and modifying the
dom_richtext.htm file. The new template connects directly to the CKEditor that is installed with 8.5.2.
Save this example as the file
domino-data-directory/domino/template/dojo-version/dom_richtext_ck.htm.
The
version is the current Dojo version. There may be more than one Dojo directories installed. Use the latest, unless you have specifically chosen to configure the server to use a different version of Dojo.
&DOMINO_CTRL_HEAD;
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script language="JavaScript" type="text/javascript">
CKEDITOR.config.toolbar_Domino =
[
['Font','FontSize'],
['Bold','Italic','Underline','Strike', '-', 'Subscript','Superscript'],
['TextColor', 'BGColor'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', '-', 'NumberedList','BulletedList'],
['Indent','Outdent', 'Blockquote'],
['MenuPaste'],
['Table', 'HorizontalRule', 'SpecialChar'],
['MenuLink'],
['Maximize', '-', 'Source']
];
CKEDITOR.config.toolbar = "Domino";
CKEDITOR.config.fontSize_sizes='1;2;3;4;5;6;7';
CKEDITOR.config.fontSize_style= { element: 'font', attributes : { 'size' : '#(size)' } };
CKEDITOR.config.font_names = 'Arial;Comic Sans MS;Courier New;Lucida Sans Unicode;Tahoma;Times New Roman;sans-serif;serif;monospace';
CKEDITOR.config.font_style = { element: 'font', attributes : { 'face' : '#(family)' } };
var rteList = new Array();
function GetJSEditorData() {
for (var j=0; j < rteList.length; j++) {
rteList[j](null);
}
return true;
};
</script>
&DOMINO_CTRL_HEAD_END;
&DOMINO_CTRL_FORM_ID;&DOMINO_CTRL_FORMNAME;&DOMINO_CTRL_FORM_ID_END;
&DOMINO_CTRL_POST;GetJSEditorData()&DOMINO_CTRL_POST_END;
&DOMINO_CTRL_BODY;<div class="domino-richtext"><textarea name="tb&DOMINO_CTRL_FLDNAME;" id="tb&DOMINO_CTRL_FLDNAME;">&DOMINO_CTRL_FLDVALUE;</textarea></div>
&DOMINO_CTRL_BODY_END;
&DOMINO_CTRL_FLD_INIT;
<input name="&DOMINO_CTRL_FLDNAME;" type="hidden" value="" ID="&DOMINO_CTRL_FLDNAME;">
<script type="text/javascript">
function get&DOMINO_CTRL_FLDNAME;() {
document.getElementById('&DOMINO_CTRL_FLDNAME;').value = CKEDITOR.instances.tb&DOMINO_CTRL_FLDNAME;.getData();
return true;
}
rteList.push(get&DOMINO_CTRL_FLDNAME;);
</script>
<script type="text/javascript">
CKEDITOR.replace('tb&DOMINO_CTRL_FLDNAME;');
</script>&DOMINO_CTRL_FLD_INIT_END;
Then let the web server know about this file by adding a line to the server's notes.ini:
WebRichTextEditorTemplates=dom_richtext_ck.htm
Note: This INI can be a comma separated list of template names -- so you can have several custom templates.
Finally, choose which browser(s) will use the editor and make an entry in the
domino-data-directory/browser.cnf.
The rule below will use the
dom_richtext_ck.html template for all Chrome, Safari, and MSIE browsers.
Note: you may want to restrict this based on browser version, especially for early version of MSIE.
Property WebRichTextEditorTemplateID Number 0
Rule 1 Chrome
Rule 1 Safari
Rule 1 MSIE
The number value ("1" in the example) matches the relative position (starting at 1) of the control template in the
WebRichTextEditorTemplates list in notes.ini
Note: values of
WebRichTextEditorTemplateID
0 override the design-time choice of rich text item editor for any value other than "Using HTML" in the "Web Access : Display" property. So in the example above, the CKEditor will be used for MSIE even it at design time it was set to "Using Java Applet". This browser.cnf property also overrides
RTEditorBestFit as described in
Controlling Best Fit for OS editor with browser.cnf
Usage notes:
- many of the limitations of the classic web server HTML rich text editing remain, such as
- Embedded images: lost on save
- embedded file attachments: location in file lost -- they all appear at the end of the document.
- tabbed tables: all but the visible tab is lost
- hidden "hide when" objects are lost when saved
- buttons and other "advanced" notes editor constructs: lost or degraded to not operate
- The example configures the CKEditor to use <font> tags and size attribute for font size changes instead of span with css. This is to produce HTML that is compatible with the notes editor's HTML rendering as well as the notes HTML to Rich Text converter
- Depending on the specific version of the CKEditor you use, there may be some problems with Internet Explorer in quirks mode (http://dev.ckeditor.com/ticket/5243
). One example is that the UI for adding URL links is formatted incorrectly. META tags or DOCTYPE can be used to put the browser in standards mode. (See HTMLOptions and HTMLTagAttribute fields)